<template>
  <div class="seat-monitoring">
    <!-- 头部区域 -->
    <div class="monitoring-header">
      <div class="header-content">
        <div class="title-section">
          <div class="title-wrapper">
            <div class="title-bar"></div>
            <h2 class="title-text">坐席监控</h2>
          </div>
          <div class="status-legend">
            <div v-for="(i, idx) in statusMap" :key="idx" class="legend-item">
              <span class="legend-label">{{ i.label }}:</span>
              <div class="legend-color" :style="{ backgroundColor: i.color }"></div>
            </div>
          </div>
        </div>
        <div class="action-section">
          <el-button type="primary" class="refresh-btn" @click="refsh">
            <Icon icon="ep:refresh" class="btn-icon" />
            刷新
          </el-button>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="monitoring-content">
      <div class="content-wrapper">
        <!-- 坐席列表 -->
        <div class="monitor-grid">
          <div class="agent-card" v-for="item in list" :key="item.id">
            <!-- 卡片头部 -->
            <div class="card-header">
              <div class="agent-avatar">
                <svg
                  t="1745386899437"
                  class="avatar-icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="7078"
                >
                  <path
                    d="M519.4752 254.4128c133.4784 2.9184 216.7296 84.1216 216.7296 221.0304 0 23.3984 0.3584 54.1696-1.024 83.456-31.488 13.2096-110.08 21.504-181.248 13.9264a64.1024 64.1024 0 0 0-70.7584 56.576c-3.7888 35.072 21.504 69.8368 56.6272 73.7792 16.64 1.8944 44.032 1.024 76.032 1.024 26.112 0 58.624 1.7408 87.7056-2.9184-13.2608 29.7984-35.584 50.944-63.6416 72.7552v9.6768c128.1536 20.1216 218.624 72.5504 218.4704 142.2336 0 17.7152-22.2208 34.2528-39.936 34.2528H190.464c-17.7152 0-32.512-16.5376-32.512-34.2528C157.9008 856.4736 256 803.84 384 783.872v-9.6256c-96-75.008-97.3824-213.1456-97.3824-297.7792 0-137.0624 79.9744-219.2896 213.504-222.0544z m293.7856 292.2496a31.7952 31.7952 0 0 1 15.0016 42.6496c-33.8944 70.0416-144.896 82.432-219.3408 82.432-34.2016 0-60.928-2.6112-68.4544-3.4816a31.8976 31.8976 0 1 1 7.0656-63.488c79.616 8.8064 201.728 1.2288 223.0784-43.1616a31.8976 31.8976 0 0 1 42.6496-14.9504zM511.8976 100.096a352.9216 352.9216 0 0 1 351.4368 329.4208l43.52 15.4624a32.1024 32.1024 0 0 1 21.3504 30.1056v132.8128a32.2048 32.2048 0 0 1-32.2048 32 31.9488 31.9488 0 0 1-31.9488-32V497.6128l-42.8544-15.3088a32.1024 32.1024 0 0 1-21.3504-30.0544 288.256 288.256 0 0 0-287.9488-288 288.256 288.256 0 0 0-287.9488 288c0 10.2912-4.9664 19.968-13.4144 25.9584l-18.5856 13.2608v116.224a31.9488 31.9488 0 1 1-64 0V474.9824c0-10.3424 5.0176-19.968 13.4656-25.9584l18.944-13.6192c8.704-186.2656 163.0208-335.2576 351.5392-335.2576z"
                    p-id="7079"
                    :fill="colorMap[item.state]"
                  ></path>
                </svg>
                <div
                  class="status-indicator"
                  :style="{ backgroundColor: colorMap[item.state] }"
                ></div>
              </div>
              <div class="agent-info">
                <div class="info-item">
                  <Icon icon="ep:postcard" class="info-icon" />
                  <span class="info-label">工号:</span>
                  <span class="info-value">{{ item.agentId }}</span>
                </div>
                <div class="info-item">
                  <Icon icon="ep:user" class="info-icon" />
                  <span class="info-label">姓名:</span>
                  <span class="info-value agent-name">{{ item.ownerUsername }}</span>
                </div>
              </div>
            </div>

            <!-- 卡片内容 -->
            <div class="card-body">
              <div class="status-section">
                <div class="status-item">
                  <Icon icon="ep:connection" class="status-icon" />
                  <span class="status-label">工作状态:</span>
                  <el-tag :type="getStatusTagType(item.state)" class="status-tag" size="small">
                    {{ item.state_name }}
                  </el-tag>
                </div>
                <div class="group-item">
                  <Icon icon="ep:office-building" class="group-icon" />
                  <span class="group-label">班组:</span>
                  <span class="group-value">{{ item.groupName }}</span>
                </div>
              </div>
            </div>

            <!-- 卡片操作 -->
            <div class="card-footer">
              <div class="action-grid">
                <button
                  :class="getButtonClass(item.state, 'primary')"
                  :disabled="!item.state"
                  @click="setBusy(item)"
                  class="action-btn busy-btn"
                >
                  <Icon icon="ep:clock" class="action-icon" />
                  <span>置忙</span>
                </button>
                <button
                  :class="getButtonClass(item.state, 'warning')"
                  :disabled="!item.state"
                  @click="setIdle(item)"
                  class="action-btn idle-btn"
                >
                  <Icon icon="ep:check" class="action-icon" />
                  <span>置闲</span>
                </button>
                <button
                  :class="getButtonClass(item.state, 'info')"
                  :disabled="!item.state"
                  @click="doListenClick(item)"
                  class="action-btn listen-btn"
                >
                  <Icon icon="ep:microphone" class="action-icon" />
                  <span>监听</span>
                </button>
                <button
                  :class="getButtonClass(item.state, 'info')"
                  :disabled="!item.state"
                  @click="doBargeIn(item)"
                  class="action-btn barge-btn"
                >
                  <Icon icon="ep:phone" class="action-icon" />
                  <span>强插</span>
                </button>
                <button
                  :class="getButtonClass(item.state, 'danger')"
                  :disabled="!item.state"
                  @click="doInterceptIn(item)"
                  class="action-btn intercept-btn"
                >
                  <Icon icon="ep:warning" class="action-icon" />
                  <span>拦截</span>
                </button>
                <button
                  :class="getButtonClass(item.state, 'danger')"
                  :disabled="!item.state"
                  @click="logout(item)"
                  class="action-btn logout-btn"
                >
                  <Icon icon="ep:switch-button" class="action-icon" />
                  <span>登出</span>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <Pagination
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="getAgentList"
          />
        </div>
      </div>
    </div>

    <!-- 监听弹窗 -->
    <Dialog v-model="modalForm.isShow" title="监听设置" width="400" class="monitor-dialog">
      <div class="dialog-content">
        <div class="dialog-header">
          <Icon icon="ep:microphone" class="dialog-icon" />
          <span class="dialog-title">配置监听参数</span>
        </div>
        <el-form :model="modalForm" :label-width="100" class="monitor-form">
          <el-form-item label="监听类型：" class="form-item">
            <el-radio-group v-model="modalForm.monitorType" class="radio-group">
              <el-radio label="mute" class="radio-item">
                <div class="radio-content">
                  <Icon icon="ep:mute" class="radio-icon" />
                  <span>静音</span>
                </div>
              </el-radio>
              <el-radio label="whisper" class="radio-item">
                <div class="radio-content">
                  <Icon icon="ep:chat-dot-round" class="radio-icon" />
                  <span>耳语</span>
                </div>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="通话坐席：" class="form-item">
            <el-select v-model="modalForm.agentId" class="agent-select" placeholder="请选择坐席">
              <el-option
                v-for="item in modalForm.readyAgents"
                :value="item.agentId"
                :key="item.agentId"
                :label="item.agentName"
              >
                <div class="option-content">
                  <Icon icon="ep:user" class="option-icon" />
                  <span>{{ item.agentName }}</span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="form-actions">
            <el-button type="primary" @click="doListen()" class="confirm-btn">
              <Icon icon="ep:check" class="btn-icon" />
              确定
            </el-button>
            <el-button @click="modalForm.isShow = false" class="cancel-btn">
              <Icon icon="ep:close" class="btn-icon" />
              取消
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </Dialog>
  </div>
</template>

<script setup>
import { getAgentPage } from '@/api/call/agent/index.ts'
import {
  monitor,
  forceLogout,
  forceReady,
  forceNotReady,
  forceSkillChange
} from '@/api/call/seatMonitoring/index.ts'
import { useSoftPhoneStore } from '@/store/modules/softPhone'
import { emitter } from '@/utils/eventBus'
import SoftPhone from '@/utils/softPhone.js'

const useSoftPhone = useSoftPhoneStore()
const modalForm = reactive({
  isShow: false,
  readyAgents: [],
  agentId: '',
  monitorType: 'mute'
})
const statusMap = [
  { label: '置忙', status: 'NotReady', color: '#0052cc' },
  { label: '置闲', status: 'Ready', color: '#e6a23c' },
  { label: '通话中', status: 'Established', color: '#67c23a' },
  { label: '话后', status: 'AfterCallWork', color: '#f4f4f5' },
  { label: '离线', status: undefined, color: '#f56c6c' }
]
const colorMap = {
  NotReady: '#0052cc',
  Ready: '#e6a23c',
  Established: '#67c23a',
  AfterCallWork: '#f4f4f5',
  '': '#f56c6c',
  undefined: '#f56c6c',
  null: '#f56c6c'
}
const queryParams = reactive({
  pageNo: 1,
  pageSize: 8
})
const loading = ref(false)
const list = ref([])
const total = ref(0)
const timer = ref(null)

// 获取状态标签类型
const getStatusTagType = (state) => {
  switch (state) {
    case 'Ready':
      return 'warning'
    case 'Established':
      return 'success'
    case 'NotReady':
      return 'primary'
    case 'AfterCallWork':
      return 'info'
    default:
      return 'danger'
  }
}

// 获取按钮样式类
const getButtonClass = (state, type) => {
  const baseClass = 'enhanced-btn'
  const typeClass = `btn-${type}`
  const stateClass = state ? 'btn-enabled' : 'btn-disabled'
  return `${baseClass} ${typeClass} ${stateClass}`
}

const getAgentList = async (val) => {
  if (val) {
    queryParams.pageNo = val.page
    queryParams.pageSize = val.limit
  }
  loading.value = true
  try {
    const data = await getAgentPage(queryParams)
    const agentNumberArr = data.list.map((item) => item.agentNumber)
    const result = await monitor({ agentIdList: agentNumberArr })
    list.value = mergeValues(data.list, result)
    total.value = data.total
  } finally {
    loading.value = false
  }
}
// key
const mergeValues = (arrayA, objectB) => {
  arrayA.forEach((itemA) => {
    let key = itemA.agentNumber
    if (objectB[key]) {
      Object.assign(itemA, objectB[key])
    }
  })
  return arrayA
}
/*置忙*/
const setBusy = async (item) => {
  try {
    await forceNotReady({ agentId: item.agentNumber })
    ElMessage.success('置忙成功!')
    getAgentList()
  } catch {}
}
/*置闲*/
const setIdle = async (item) => {
  try {
    await forceReady({ agentId: item.agentNumber })
    ElMessage.success('置闲成功!')
    getAgentList()
  } catch {}
}
const listenValue = ref(null)
/*监听*/
const doListenClick = (item) => {
  listenValue.value = item
  modalForm.readyAgents = []
  emitter.emit('SuperAgentGetState', agents, item.agentNumber)
}
emitter.on('pushAgent', (agent) => {
  modalForm.readyAgents.push(agent)
})
emitter.on('SetIsShow', (val) => {
  modalForm.isShow = val
})
/*确定监听*/
const doListen = () => {
  emitter.emit('doListen', modalForm.agentId, modalForm.monitorType, {
    agentId: listenValue.value.agentNumber,
    extensionNum: listenValue.value.agentNumber
  })
}
/*强插*/
const doBargeIn = (item) => {
  emitter.emit('doBargeIn', {
    agentId: item.agentNumber,
    extensionNum: item.agentNumber
  })
}
/*拦截*/
const doInterceptIn = (item) => {
  emitter.emit('doInterceptIn', {
    agentId: item.agentNumber
  })
}
/*登出*/
const logout = async (item) => {
  try {
    await forceLogout({ agentId: item.agentNumber })
    ElMessage.success('登出成功!')
    getAgentList()
  } catch {}
}
const refsh = () => {
  clearInterval(timer.value)
  timer.value = null
  getList()
  getAgentList()
}
const getList = () => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
  timer.value = setInterval(() => {
    getAgentList()
  }, 10e3)
}
onMounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
  getAgentList()
  getList()
})
onBeforeMount(() => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
})
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
})
</script>

<style lang="scss" scoped>
.seat-monitoring {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 16px;

  @media (max-width: 768px) {
    padding: 8px;
  }
}

/* 头部区域 */
.monitoring-header {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  color: white;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px;
  }
}

.title-section {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
}

.title-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-bar {
  width: 4px;
  height: 24px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
}

.title-text {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: white;

  @media (max-width: 768px) {
    font-size: 18px;
  }
}

.status-legend {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;

  @media (max-width: 768px) {
    gap: 12px;
    justify-content: center;
  }
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.legend-label {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.3);

  @media (max-width: 768px) {
    width: 14px;
    height: 14px;
  }
}

.action-section {
  flex-shrink: 0;
}

.refresh-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.2s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
  }

  @media (max-width: 768px) {
    width: 100%;
    padding: 12px 20px;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

/* 主要内容区域 */
.monitoring-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
  overflow: hidden;
}

.content-wrapper {
  padding: 24px;
  position: relative;
  min-height: 600px;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

/* 坐席网格 */
.monitor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 60px;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  @media (min-width: 769px) and (max-width: 1024px) {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

/* 坐席卡片 */
.agent-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 82, 204, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 82, 204, 0.15);
  }
}

.card-header {
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-bottom: 1px solid rgba(0, 82, 204, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;

  @media (max-width: 768px) {
    padding: 16px;
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

.agent-avatar {
  position: relative;
  flex-shrink: 0;
}

.avatar-icon {
  width: 48px;
  height: 48px;
  transition: all 0.2s ease;

  @media (max-width: 768px) {
    width: 40px;
    height: 40px;
  }
}

.status-indicator {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  @media (max-width: 768px) {
    width: 14px;
    height: 14px;
  }
}

.agent-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;

  @media (max-width: 768px) {
    align-items: center;
  }
}

.info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;

  @media (max-width: 768px) {
    font-size: 13px;
  }
}

.info-icon {
  color: #6b7280;
  font-size: 14px;
  flex-shrink: 0;
}

.info-label {
  color: #6b7280;
  font-weight: 500;
  flex-shrink: 0;
}

.info-value {
  color: #1f2937;
  font-weight: 600;
}

.agent-name {
  max-width: 150px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  @media (max-width: 768px) {
    max-width: 200px;
  }
}

.card-body {
  padding: 20px;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

.status-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;

  @media (max-width: 768px) {
    font-size: 13px;
  }
}

.status-icon {
  color: #0052cc;
  font-size: 16px;
  flex-shrink: 0;
}

.status-label {
  color: #374151;
  font-weight: 500;
  flex-shrink: 0;
}

.status-tag {
  font-weight: 500;
}

.group-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;

  @media (max-width: 768px) {
    font-size: 13px;
  }
}

.group-icon {
  color: #6b7280;
  font-size: 16px;
  flex-shrink: 0;
}

.group-label {
  color: #374151;
  font-weight: 500;
  flex-shrink: 0;
}

.group-value {
  color: #1f2937;
  font-weight: 600;
}

.card-footer {
  background: #f8fafc;
  border-top: 1px solid rgba(0, 82, 204, 0.1);
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;

  @media (max-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: none;
  border-right: 1px solid rgba(0, 82, 204, 0.1);
  border-bottom: 1px solid rgba(0, 82, 204, 0.1);
  background: white;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;

  &:last-child {
    border-right: none;
  }

  &:nth-child(3n) {
    border-right: none;
  }

  @media (max-width: 768px) {
    padding: 14px 8px;
    font-size: 11px;

    &:nth-child(2n) {
      border-right: none;
    }

    &:nth-child(3n) {
      border-right: 1px solid rgba(0, 82, 204, 0.1);
    }

    &:nth-child(n + 5) {
      border-bottom: none;
    }
  }
}

.enhanced-btn {
  &.btn-enabled {
    &:hover {
      background: rgba(0, 82, 204, 0.05);
      transform: translateY(-1px);
    }

    &.btn-primary {
      color: #0052cc;

      &:hover {
        background: rgba(0, 82, 204, 0.1);
      }
    }

    &.btn-warning {
      color: #e6a23c;

      &:hover {
        background: rgba(230, 162, 60, 0.1);
      }
    }

    &.btn-info {
      color: #6b7280;

      &:hover {
        background: rgba(107, 114, 128, 0.1);
      }
    }

    &.btn-danger {
      color: #f56c6c;

      &:hover {
        background: rgba(245, 108, 108, 0.1);
      }
    }
  }

  &.btn-disabled {
    color: #c0c4cc;
    cursor: not-allowed;
    background: #f5f7fa;

    &:hover {
      background: #f5f7fa;
      transform: none;
    }
  }
}

.action-icon {
  font-size: 16px;

  @media (max-width: 768px) {
    font-size: 14px;
  }
}

/* 分页 */
.pagination-wrapper {
  position: absolute;
  bottom: 20px;
  right: 20px;

  @media (max-width: 768px) {
    position: static;
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  :deep(.el-pagination) {
    @media (max-width: 768px) {
      .el-pagination__sizes,
      .el-pagination__jump {
        display: none;
      }
    }
  }
}

/* 弹窗样式 */
.monitor-dialog {
  :deep(.el-dialog) {
    border-radius: 12px;
    overflow: hidden;

    @media (max-width: 768px) {
      width: 95% !important;
      margin: 20px auto;
    }
  }

  :deep(.el-dialog__header) {
    background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
    color: white;
    padding: 20px 24px;
  }

  :deep(.el-dialog__title) {
    color: white;
    font-weight: 600;
  }

  :deep(.el-dialog__headerbtn .el-dialog__close) {
    color: white;
  }

  :deep(.el-dialog__body) {
    padding: 0;
  }
}

.dialog-content {
  padding: 24px;

  @media (max-width: 768px) {
    padding: 20px;
  }
}

.dialog-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.dialog-icon {
  color: #0052cc;
  font-size: 18px;
}

.dialog-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.monitor-form {
  .form-item {
    margin-bottom: 20px;

    :deep(.el-form-item__label) {
      font-weight: 500;
      color: #374151;
    }
  }
}

.radio-group {
  display: flex;
  gap: 16px;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 12px;
  }
}

.radio-item {
  :deep(.el-radio__label) {
    padding-left: 8px;
  }
}

.radio-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.radio-icon {
  font-size: 14px;
  color: #6b7280;
}

.agent-select {
  width: 100%;

  :deep(.el-input__wrapper) {
    border-radius: 8px;
  }
}

.option-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.option-icon {
  color: #6b7280;
  font-size: 14px;
}

.form-actions {
  margin-bottom: 0;
  display: flex;
  gap: 12px;
  justify-content: flex-end;

  @media (max-width: 768px) {
    flex-direction: column;
  }
}

.confirm-btn {
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.cancel-btn {
  border: 2px solid #e5e7eb;
  color: #6b7280;
  border-radius: 8px;
  padding: 10px 20px;

  &:hover {
    border-color: #d1d5db;
    color: #374151;
  }

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .seat-monitoring {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  }

  .monitoring-header,
  .monitoring-content,
  .agent-card {
    background: #374151;
    border-color: rgba(255, 255, 255, 0.1);
  }

  .card-header {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
  }

  .card-footer {
    background: #4b5563;
  }

  .info-value,
  .group-value {
    color: #f9fafb;
  }

  .info-label,
  .group-label,
  .status-label {
    color: #d1d5db;
  }

  .action-btn {
    background: #4b5563;
    border-color: rgba(255, 255, 255, 0.1);

    &.btn-enabled:hover {
      background: #6b7280;
    }
  }

  .dialog-content {
    background: #374151;
  }

  .dialog-title {
    color: #f9fafb;
  }
}
</style>
